Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue |
您所在的位置：网站首页 › nuxt 优化 › Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue |
Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue
|
(亲测有效)服务端渲染nuxt对axios/jQuery/swiper/vue-lazyload启用cdn加速，elementUI进行按需导入
前言：在nuxt中做一些性能上的优化其实存在许多坑，尽管nuxt已经帮你做了许多事情， 下面是我慢慢捣鼓出来的，有问题的话望大佬指出 一 、打包开启打包分析 第一步，下载依赖webpack-bundle-analyzer npm i webpack-bundle-analyzer -D 第二步，在package.json中scripts中加一项配置 "analyze": "nuxt build -a" -最后再nuxt.config.js中的build开启analyze
build:{
// // 开启打包分析
analyze: true,
}
然后执行 npm run analyze 
三、nuxt中开启vue-lazyload图片懒加载
下载依赖vue-lazyload
npm i vue-lazyload
第二步在plugins中创建vue-lazyload.js
import Vue from "vue";
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload, {
preLoad: 1.33,
error: "",
loading:
"https://gw.pugetd.com/2021-06-12/fec6b814-402c-4f38-80a0-2ac390468bad_loading1.gif",
attempt: 2,
throttleWait: 500
});
以下是具体配置项  vue中使用，把所有的:src替换为v-lazy，注意只能是动态绑定的src  看看效果吧 
四、把axios/jQuery/swiper/vue-lazyload图片懒加载进行cdn加载
我这里用的axios不是@nuxt/axios第一步,将该配置plugins的就先配置上,然后开启ssr  第二步，在nuxt.config.js中build中打包忽略要cdn加载的
build: {
transpile: [/^element-ui/],
extractCSS: true,
//设置扩展项
extend(config, ctx) {
// Run ESLint on save
if (ctx.isClient) {
//忽略打包
config.externals = {
// "element-ui": "ELEMENT",
axios: "axios",
jquery: "$",
swiper: "Swiper",
"vue-lazyload": "VueLazyload"
};
// config.module.rules.push({
// enforce: "pre",
// test: /\.(js|vue)$/,
// loader: "eslint-loader",
// exclude: /(node_modules)/
// });
}
},
//为 JS 和 Vue 文件设定自定义的 babel 配置。配置elementui按需加载
babel: {
plugins: [
[
"component",
{ libraryName: "element-ui", styleLibraryName: "theme-chalk" }
],
["@babel/plugin-syntax-dynamic-import"]
]
},
// 开启打包分析
analyze: true,
}
第三步在nuxt.config中head中设置cdn链接，一定要和package.json中的版本号一致我用的是免费的CDN，可以用阿里CDN加速更快
head: {
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href:
"https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css"
}
],
script: [
{
src: "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
},
{
src: "https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"
},
{
src: "https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"
},
{
src:
"https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.3/vue-lazyload.js"
}
]
},
最后打包分析查看有没有被打包 然后npm run start 看看有没有报错 发现没有报错，cdn加载成功，上线！！ 更多推荐：wantLG的《普歌-vue-template-amdin用webpack配置CND加速/打包忽略element、vue、vueRouter等（亲测有效）)》 作者：wantLG本文源自：wantLG的《普歌-Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载)》本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。 |
【本文地址】